<template>
  <div id="shop">
        <mt-header fixed :title="!isChangeInfo?'我的商铺':'修改商店信息'">
            <span slot="left">
                <mt-button icon="back" @click.native="() =>{
                    if(!isChangeInfo) return goB()
                    isChangeInfo = false
                  }">返回</mt-button>
            </span>
        </mt-header>

        <div class="shop-content">
          <!-- 信息添加 -->
          <div class="addInfo" v-if="!shopId">
            <mt-field label="名字" placeholder="请输入商铺名字" v-model="sname1"></mt-field>
            <mt-field label="地址" placeholder="请输入商家地址" v-model="shopAddress1"></mt-field>
            <mt-field label="电话" placeholder="请输商家电话" type="tel" v-model="shopPhone1"></mt-field>
            <div class="shop-bgc">
              <input type="file" @change="getImg">
              <mt-button type="danger" size="large">
                上传店铺招牌图片
              </mt-button>  
            </div>
            <mt-button type="primary" size="large" @click="sendSaveInfo">
              确定
            </mt-button>
          </div>

          <!-- 信息修改 -->
          <transition name="tIn" mode="out-in">
            <div class="addInfo" v-if="isChangeInfo">
              <mt-field label="名字" placeholder="请输入商铺名字" v-model="sname1"></mt-field>
              <mt-field label="地址" placeholder="请输入商家地址" v-model="shopAddress1"></mt-field>
              <mt-field label="电话" placeholder="请输商家电话" type="tel" v-model="shopPhone1"></mt-field>
              <div class="shop-bgc">
                <input type="file" @change="getImg">
                <mt-button type="danger" size="large">
                  上传店铺招牌图片
                </mt-button>  
              </div>
              <div class="confirm">
                  <mt-button type="danger" size="large" @click.native="() =>{isChangeInfo = false}">取消</mt-button>
                  <mt-button type="primary" size="large" @click.native="changeLoginShop">确定</mt-button>
              </div>
              
            </div>
          </transition>
          <!-- 管理商铺和修改信息 -->
          <transition name="tIn" mode="out-in">
            <div class="shopManger" v-if="sname && !isChangeInfo">
              <!-- 店铺管理 -->
              <mt-cell
                  title="管理商铺"
                  :to="{name: 'shop'}"
                  is-link
                >
                  <span class="icon">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-guanli"></use>
                      </svg>
                  </span>
              </mt-cell>
              <!-- 信息修改 -->
              <mt-cell
                  title="信息修改"
                  is-link
                  @click.native="getInfo"
                >
                  <span class="icon">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-xiugai-copy"></use>
                      </svg>
                  </span>
              </mt-cell>
              <!-- 收到订单 -->
              <mt-cell
                  title="收到订单"
                  is-link
                  :to="{name: 'getOrder', params: {orderState: 0}}"
                >
                  <span class="icon">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shoudaoshenqing"></use>
                      </svg>
                  </span>
              </mt-cell>
              <!-- 已经完成的订单 -->
              <mt-cell
                  title="完成订单"
                  is-link
                  :to="{name: 'alreOrder', params: {orderState: 1}}"
                >
                  <span class="icon">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-wancheng"></use>
                      </svg>
                  </span>
              </mt-cell>
            </div>
          </transition>
        </div>
  </div>  
</template>
<script>

import axios from 'axios'
import {mapState, mapMutations, mapActions} from 'vuex'
import { MessageBox, Indicator} from 'mint-ui'
export default {
    data(){
      return {
        shopPhone1: '',//电话
        shopAddress1: '',//地址
        sname1: '',//商铺名字
        shopBgc1: '',//商铺招牌图片
        isChangeInfo: false//是否修改信息

      }
    },
    inject: ['reload', 'goB'],
    created(){
        //拿取自己的优惠卷  不要在进入商铺才拿取  不再使用 用户名拿取
        this.getCoupon({
          couponId: this.storeFlag
        }).then((couponMenu) =>{
            couponMenu = couponMenu.filter(item =>{
                return item.couponStatus != 3
            })

           this.setState({couponMenu})
        }, () =>{
          console.log("没有优惠劵")
        })
    },
    computed:{
      ...mapState([
        'storeFlag',
        'uname',
        'shopId',
        'type',
        'sname',
        'shopAddress',
        'shopPhone',
        'shopBgc',
        'statusName',
        'goodMenu'
        
      ])
    },
    methods:{
      ...mapMutations([
        'setState',
        'setToast',
        'setIndicator',
        'setMessage'
      ]),
      ...mapActions([
          'saveShop',
          'changeShopInfo',
          'changeShopLogin',
          'getCoupon',
          'changeNS'
      ]),
      //存储商家信息
      
      //正常
      sendSaveInfo(){
          if(!this.checkInfo()) return
          
          const {shopPhone1,shopAddress1,sname1,
                shopBgc1, uname, type, storeFlag, 
                goodMenu, isChangeInfo, reload} = this

          MessageBox({
              title: '提示',
              message: '是否创建店铺?',
              showCancelButton: true
          }).then(action =>{
            if(action === 'cancel') return

              this.setIndicator('请稍等...')
              const data = {
                    sname: sname1,
                    shopAddress: shopAddress1,
                    shopPhone: shopPhone1,
                    shopBgc: shopBgc1,
                    statusName: uname,
                    shopId: storeFlag,
                    goodMenu: this.goodMenu,
              }
              this.saveShop(data).then(() =>{
                  Indicator.close()
                  //设置状态的值
                  return this.setState(data)
              }, () =>{
                 MessageBox.alert('创建失败，请稍后再试')
              })
          })
      },



      //修改注册商铺数据
      changeLoginShop(){
          
            const {shopPhone1,shopAddress1,sname1,
                  shopBgc1, uname, type, storeFlag, 
                  goodMenu, isChangeInfo, reload} = this


              if(this.sname === sname1 && this.shopPhone === shopPhone1
                  && this.shopAddress === shopAddress1 && this.shopBgc === shopBgc1) {
                    //x信息没有变化 询问是否放弃修改
                    MessageBox({
                      title: '提示',
                      message: '您的信息没有变化，是否放弃修改?',
                      showCancelButton: true
                    }).then(action =>{
                      if(action === 'cancel') return

                      this.isChangeInfo = false
                    })

                    return
              }

              this.setIndicator('正在修改...')

              const changeSname = this.sname1

              const data = {
                  sname: sname1,
                  shopAddress: shopAddress1,
                  shopPhone: shopPhone1,
                  shopBgc: shopBgc1
              }

              this.changeShopLogin({
                    shopId: this.storeFlag,
                    data
              }).then(() =>{

                Indicator.close()

                //修改成功之后需要关闭
                this.isChangeInfo = false 
                //设置相应的数据
                this.setToast('修改成功')
                if(sname1 === this.sname) return this.setState(data)
                
                this.setState(data)
                
                this.changeNS({
                  url: 'changeC',
                  data:{
                      sname: sname1
                  }
                }).then(() =>{
                  console.log('修改优惠劵成功')
                }, () =>{
                  console.log('修改优惠劵失败')
                })


                this.changeNS({
                  url: 'changeO',
                  data: {
                      orderSName: sname1
                  }
                }).then(() =>{
                  console.log('修改订单劵成功')
                }, () =>{
                  console.log('修改订单劵失败')
                })

              }, () =>{
                this.setMessage('修改失败')
              })         
      },

      //一旦修改 商店名字 就要修改优惠劵相应数据
      changeC(sname, newData){
        //修改优惠劵
        this.changeNS({
          url: 'changeC',
          data:{
              sname
          }
        }).then( msg =>{
          //此时说明修改成功 再次修改订单
          this.changeO(sname, newData)
        }, msg =>{

           //此时修改失败  但是之前商店信息已经修改成功了 因此需要在设置回来
            this.changeShopLogin({
                  shopId: this.storeFlag,
                  data: {
                    sname: this.sname,
                    shopAddress: this.shopAddress,
                    shopPhone: this.shopPhone,
                    shopBgc: this.shopBgc
                  }
            }).then(() =>{
              //重置成功
              this.setMessage('真的修改失败')

            }, () =>{
              //此时重置失败了
               this.resetFail()
            })
        })
      },


      //验证信息是否输入
      checkInfo(){
        const {shopPhone1,shopAddress1,sname1, shopBgc1, uname, type, storeFlag, goodMenu, isChangeInfo, reload} = this
          
          const regPhone = new RegExp(/^1[3|4|5|8][0-9]\d{4,8}$/)
          if(!sname1){
              return this.setToast('商铺名为空')
          }else if(!shopAddress1){
              return this.setToast('商家地址为空')
          }else if(!shopPhone1){
              return this.setToast('商家电话')
          }else if(!regPhone.test(shopPhone1)){
              return this.setToast('电话填写错误')
          }else if(!shopBgc1){
              return this.setToast('请上传店铺招牌图片')
          }


          return true
      },

      //修改食材之前先获取食材的信息的信息
      getInfo(){
        
        this.isChangeInfo = true

        //赋值  修改即可
        this.shopPhone1 = this.shopPhone
        this.shopAddress1 = this.shopAddress
        this.sname1 = this.sname
        this.shopBgc1 = this.shopBgc
      },

      //获取店铺招牌图片
      getImg(ev){

        const files = ev.target.files

        const reader = new FileReader()

        reader.readAsDataURL(files[0])

        reader.addEventListener("load", (ev) => {
            this.shopBgc1 = ev.target.result
        }, false);
      }

    }
}
</script>
<style lang="less" scoped>
#shop{
  .shop-content{
    margin-top: 50px;
    .addInfo{
      position: absolute;
      width: 100%;
      .shop-bgc{
        position: relative;
        margin: 10px 0;
        > input{
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0;
        }
      }

      //信息修改的两个按钮
      .confirm{
        display: flex;
        button{
          border-radius: 0;
        }
      }
    }
    .shopManger{
      width: 100%;
      .icon{
          width: 50px;
          height: 35px;
          float: left;
          svg{
              width: 100%;
          }
      }
    }
  }
}

</style>
